<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_1939705_bgtmkonu28.css"> -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="css/产品.css">
</head>

<body>
<!-- 项部导航 -->
<div class="xtx_topnav">
    <div class="wrapper">
        <!-- 顶部导航 -->
        <ul class="xtx_navs">
            <li>
                <a href="javascript:;">请先登录</a>
            </li>
            <li>
                <a href="javascript:;">免费注册</a>
            </li>
            <li>
                <a href=".javascript:;">我的订单</a>
            </li>
            <li>
                <a href="javascript:;">会员中心</a>
            </li>
            <li>
                <a href="javascript:;">帮助中心</a>
            </li>
            <li>
                <a href="javascript:;">在线客服</a>
            </li>
            <li>
                <a href="javascript:;">
                    <i class="mobile sprites"></i>
                    手机版
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- 头部 -->
<div class="xtx_header">
    <div class="wrapper">
        <!-- 网站Logo -->
        <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
        <!-- 主导航 -->
        <div class="xtx_navs">
            <ul class="clearfix">
                <li>
                    <a href="javascript:;">首页</a>
                </li>
                <li>
                    <a href="javascript:;">生鲜</a>
                </li>
                <li>
                    <a href="javascript:;">美食</a>
                </li>
                <li>
                    <a href="javascript:;">餐厨</a>
                </li>
                <li>
                    <a href="javascript:;">电器</a>
                </li>
                <li>
                    <a href="javascript:;">居家</a>
                </li>
                <li>
                    <a href="javascript:;">洗护</a>
                </li>
                <li>
                    <a href="javascript:;">孕婴</a>
                </li>
                <li>
                    <a href="javascript:;">服装</a>
                </li>
            </ul>
        </div>
        <!-- 站内搜索 -->
        <div class="xtx_search clearfix">
            <!-- 购物车 -->
            <a href="javascript:;" class="xtx_search_cart sprites">
                <i>2</i>
            </a>
            <!-- 搜索框 -->
            <div class="xtx_search_wrapper">
                <input type="text" placeholder="搜一搜" onclick="location.href='./search.html'">
            </div>
        </div>
    </div>
</div>
<div class="xtx-wrapper">
    <div class="container">
        <!-- 面包屑 -->
        <div class="xtx-bread">
            <a href="javascript:;"> 首页 > </a>
            <a href="javascript:;"> 电子产品 > </a>
            <a href="javascript:;"> 电视 > </a>
            <span>小米电视4A 32英寸</span>
        </div>
        <!-- 商品信息 -->
        <div class="xtx-product-info">
            <div class="left">
                <div class="pictrue">
                    <div class="中图片">
                        <img src="./images/1.jpg" alt="">
                        <div class="黑色遮罩盒子"></div>
                    </div>
                    <div class="小图片">
                        <ul>
                            <li class="边框"><img src="./images/1.jpg" alt=""></li>
                            <li><img src="./images/2.jpg" alt=""></li>
                            <li><img src="./images/3.jpg" alt=""></li>
                            <li><img src="./images/4.jpg" alt=""></li>
                            <li><img src="./images/5.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="大图片"></div>
                </div>
                <div class="other">
                    <ul>
                        <li>
                            <p>销量人气</p>
                            <p>1999+</p>
                            <p>销量人气</p>
                        </li>
                        <li>
                            <p>商品评价</p>
                            <p>999+</p>
                            <p>查看评价</p>
                        </li>
                        <li>
                            <p>收藏人气</p>
                            <p>299+</p>
                            <p><a href="javascript:;">收藏商品</a></p>
                        </li>
                        <li>
                            <p>品牌信息</p>
                            <p>小米</p>
                            <p><a href="javascript:;">品牌主页</a></p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right">
                <h3 class="name">小米电视4A 32英寸</h3>
                <p class="desc">全面屏设计 / 高清分辨率 / 海量内容 / 1G+4G大内存 / 多核处理器</p>
                <p class="price"><span class="now">¥1899</span><span class="old">¥2999</span></p>
                <div class="address">
                    <div class="item">
                        <div class="dt">促销</div>
                        <div class="dd">12月好物放送，App领券购买直降120元</div>
                    </div>
                    <div class="item">
                        <div class="dt">配送</div>
                        <div class="dd">至
                            <div class="box">
                                <span>陕西 西安 <i></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="dt">服务</div>
                        <div class="dd">
                            <span class="fw">无忧退货</span>
                            <span class="fw">快速退款</span>
                            <span class="fw">免费包邮</span>
                            <a href="#" class="lj">了解详情</a>
                        </div>
                    </div>
                </div>
                <div class="attrs">
                    <div class="item">
                        <div class="dt">颜色</div>
                        <div class="dd">
                            <img src="./uploads/img/cate-06.png" alt="">
                            <img src="./uploads/img/cate-07.png" alt="">
                        </div>
                    </div>
                    <div class="item">
                        <div class="dt">颜色</div>
                        <div class="dd">
                            <span class="size">22英寸</span>
                            <span class="size">42英寸</span>
                            <span class="size">52英寸</span>
                            <span class="size">62英寸</span>
                        </div>
                    </div>
                    <div class="item">
                        <div class="dt">数量</div>
                        <div class="dd">
                            <div class="num">
                                <a href="javascript:;">-</a>
                                <input type="text" value="1">
                                <a href="javascript:;">+</a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <a class="buy" href="javascript:;">立即购买</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 同类产品推荐 -->
        <div class="xtx-relevant-product">
            <h3>同类产品推荐</h3>
            <ul>
                <li>
                    <a href="#">
                        <img src="./uploads/history_goods_1.jpg" alt="">
                        <p class="name">USB Type C数据线</p>
                        <p class="desc">快速充电，稳定传输</p>
                        <p class="price">¥39</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/history_goods_2.jpg" alt="">
                        <p class="name">红米Note 5A 高配版</p>
                        <p class="desc">1600万像素柔光自拍</p>
                        <p class="price">¥1899</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/history_goods_3.jpg" alt="">
                        <p class="name">VGA网口多功能转接器</p>
                        <p class="desc">小巧便携，节省桌面空间</p>
                        <p class="price">¥19</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./uploads/history_goods_4.jpg" alt="">
                        <p class="name">笔记本Pro 15.6"</p>
                        <p class="desc">全金属强化机身搭配独显</p>
                        <p class="price">¥4899</p>
                    </a>
                </li>
            </ul>
            <a href="javascript:;" class="prev"><span class="iconfont icon-angle-left"></span></a>
            <a href="javascript:;" class="next"><span class="iconfont icon-angle-right"></span></a>
        </div>
        <!-- 商品详情 -->
        <div class="xtx-product-detail">
            <div class="main">
                <div class="cont">
                    <div class="tab-head">
                        <a href="javascript:;">商品详情</a>
                        <a href="javascript:;">商品评价<span>（998+）</span></a>
                    </div>
                    <div class="tab-pane">
                        <!-- 静态属性 -->
                        <div class="attrs">
                            <div class="item"><span>商品名称：</span><span>小米L32M5-AZ </span></div>
                            <div class="item"><span>商品编号：</span><span>4620979 </span></div>
                            <div class="item"><span>商品毛重：</span><span>8.0kg </span></div>
                            <div class="item"><span>商品产地：</span><span>中国大陆 </span></div>
                            <div class="item"><span>屏幕尺寸：</span><span>32英寸及以下 </span></div>
                            <div class="item"><span>能效等级：</span><span>三级能效 </span></div>
                            <div class="item"><span>电视类型：</span><span>人工智能 </span></div>
                            <div class="item"><span>选购指数：</span><span>6.9-6.0 </span></div>
                            <div class="item"><span>观看距离：</span><span>2m以下（≤32英寸）</span></div>
                        </div>
                        <!-- 详情内容 -->
                        <div class="detail">
                            <img src="https://yanxuan-item.nosdn.127.net/39d7f2407c90d0442566a719146ee9c1.jpg" alt=""
                                 data-v-2c43c764=""><img
                                src="https://yanxuan-item.nosdn.127.net/7dfee58e7c6b3996badf368610ed62b1.jpg"
                                alt="" data-v-2c43c764=""><img
                                src="https://yanxuan-item.nosdn.127.net/d1acff1a29bddd21c2ad337d892a9f7c.jpg" alt=""
                                data-v-2c43c764=""><img
                                src="https://yanxuan-item.nosdn.127.net/ac722b04b2014ac337d8db695ee46f0c.jpg"
                                alt="" data-v-2c43c764=""><img
                                src="https://yanxuan-item.nosdn.127.net/c63e36faa0848ee37c825897f5cec179.jpg" alt=""
                                data-v-2c43c764=""><img
                                src="https://yanxuan-item.nosdn.127.net/e0f13dbf14c8a2f07e86bf3df3ca002b.jpg"
                                alt="" data-v-2c43c764="">
                        </div>
                    </div>
                    <div class="tab-pane" style="display: none;">评价</div>
                </div>
                <!-- 注意事项 -->
                <div class="warn">
                    <h3>注意事项</h3>
                    <p class="tit">• 购买运费如何收取？ </p>
                    <p>
                        单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p>
                    <br>
                    <br>
                    <p class="tit">• 使用什么快递发货? </p>
                    <p>默认使用顺丰快递发货(个别商品使用其他快递） </p>
                    <p>配送范围覆盖全国大部分地区(港澳台地区除外）。 </p>
                    <br>
                    <br>
                    <p class="tit">• 如何申请退货? </p>
                    <p>
                        1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
                    <p>2.内裤和食品等特殊商品无质量问题不支持退货； </p>
                    <p>3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
                    <p>
                        4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。</p>
                </div>
            </div>
            <div class="aside">
                <div class="tit">24小时热销榜</div>
                <div class="product">
                    <img src="./uploads/fresh_goods_3.jpg" alt="">
                    <p class="name">USB Type C数据线</p>
                    <p class="desc">快速充电，稳定传输</p>
                    <p class="price">¥29</p>
                </div>
                <div class="product">
                    <img src="./uploads/fresh_goods_3.jpg" alt="">
                    <p class="name">USB Type C数据线</p>
                    <p class="desc">快速充电，稳定传输</p>
                    <p class="price">¥29</p>
                </div>
                <div class="product">
                    <img src="./uploads/fresh_goods_3.jpg" alt="">
                    <p class="name">USB Type C数据线</p>
                    <p class="desc">快速充电，稳定传输</p>
                    <p class="price">¥29</p>
                </div>
                <div class="tit">专题推荐</div>
                <div class="special">
                    <img src="./uploads/discuss_goods_1.jpg" alt="">
                    <p class="name">一往无前，诞生于崛起</p>
                </div>
                <div class="special">
                    <img src="./uploads/discuss_goods_1.jpg" alt="">
                    <p class="name">一往无前，诞生于崛起</p>
                </div>
                <div class="special">
                    <img src="./uploads/discuss_goods_1.jpg" alt="">
                    <p class="name">一往无前，诞生于崛起</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 公共底部 -->
<div class="xtx_footer clearfix">
    <div class="wrapper">
        <!-- 联系我们 -->
        <div class="contact clearfix">
            <dl>
                <dt>客户服务</dt>
                <dd class="chat">在线客服</dd>
                <dd class="feedback">问题反馈</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd class="weixin">公众号</dd>
                <dd class="weibo">微博</dd>
            </dl>
            <dl>
                <dt>下载APP</dt>
                <dd class="qrcode">
                    <img src="./uploads/qrcode.jpg">
                </dd>
                <dd class="download">
                    <span>扫描二维码</span>
                    <span>立马下载APP</span>
                    <a href="javascript:;">下载页面</a>
                </dd>
            </dl>
            <dl>
                <dt>服务热线</dt>
                <dd class="hotline">
                    400-0000-000
                    <small>周一至周日 8:00-18:00</small>
                </dd>
            </dl>
        </div>
    </div>
    <!-- 其它 -->
    <div class="extra">
        <div class="wrapper">
            <!-- 口号 -->
            <div class="slogan">
                <a href="javascript:;" class="price">价格亲民</a>
                <a href="javascript:;" class="express">物流快捷</a>
                <a href="javascript:;" class="quality">品质新鲜</a>
            </div>
            <!-- 版权信息 -->
            <div class="copyright">
                <p>
                    <a href="javascript:;">关于我们</a>
                    <a href="javascript:;">帮助中心</a>
                    <a href="javascript:;">售后服务</a>
                    <a href="javascript:;">配送与验收</a>
                    <a href="javascript:;">商务合作</a>
                    <a href="javascript:;">搜索推荐</a>
                    <a href="javascript:;">友情链接</a>
                </p>
                <p>CopyRight &copy; 小兔鲜儿</p>
            </div>
        </div>
    </div>
</div>


<script>
    // 获取DOM元素
    const 大图片盒子 = document.querySelector('.大图片')
    const 中图片盒子 = document.querySelector('.中图片')
    const 小图片盒子 = document.querySelector('.小图片')
    let 延时器 = 0 // 先声明一个变量,下面存储 延时器的序号

    // ①：鼠标经过对应小盒子，左侧中等盒子显示对应中等图片
    // 监听鼠标经过事件, 事件委托 写法
    小图片盒子.addEventListener('mouseover', function (事件对象) {
        // 1. 鼠标经过对应小图片，左侧显示对应中等图片
        // 我们要的是 img标签(图片标签)
        if (事件对象.target.tagName === 'IMG') {
            // console.log(事件对象.target) // 控制台看我们得到的信息
            const 图片路径 = 事件对象.target.src // 提取 img标签 里, src属性 (值就是图片的路径信息)
            // 改变标签信息, 实现显示相应的中图片
            中图片盒子.innerHTML = `<img src="${图片路径}" alt="">
                            <div class="黑色遮罩盒子"></div>`

            // 教程写法
            // console.log(this)
            // this.querySelector('.边框').classList.remove('边框')
            // 事件对象.target.parentNode.classList.add('边框') // parentNode上一个父级节点
        }

        // 2. 鼠标经过, 小图片有边框线显示
        // 显示边框线的CSS类在 li标签里, 所以这里监控li标签
        if (事件对象.target.tagName === 'LI') {
            // 自己的写法
            const 边框线显示 = 小图片盒子.querySelector('.边框') // 找到有 "边框"类名的,标签. 注意这个子标签li在, "小图片"父标签里
            边框线显示.classList.remove('边框')  // 删除这个找到的 CSS类
            事件对象.target.classList.add('边框') // 这里鼠标移动到那里, "事件对象.target" 就是那个li. 在这个li标签里添加 css类
        }
    })


    // ②：鼠标经过中等盒子，右侧大盒子显示 大图片
    // 封装函数
    function 大图片显示() {
        const 图片 = 中图片盒子.querySelector('img') // 获取DOM元素,  "中图片盒子" 是父级,我们这里要子级 img标签
        大图片盒子.style.backgroundImage = `url(${图片.src})` // 修改CSS属性, 插入图片.   src值是图片路径
        大图片盒子.style.display = 'block' // 修改CSS属性, 显示:块级 (显示看见)

        // 鼠标经过,关闭延时器
        clearTimeout(延时器)
    }

    function 大图片隐藏() {
        // 定义一个 延时器, 效果鼠标离开2秒 在隐藏大图片
        // 鼠标离开开启延时器
        延时器 = setTimeout(function () { // 所以 延时器,并且把序号赋值给变量,方便关闭延时器
            大图片盒子.style.display = 'none' // 修改CSS属性, 显示:隐藏
        }, 2000) // 2000毫秒=2秒
    }

    // 鼠标在 中图片和大图片上, 大图片都会显示
    // 监控 鼠标经过事件
    中图片盒子.addEventListener('mouseover', 大图片显示)
    大图片盒子.addEventListener('mouseover', 大图片显示)
    // 监控 鼠标离开事件
    中图片盒子.addEventListener('mouseout', 大图片隐藏)
    大图片盒子.addEventListener('mouseout', 大图片隐藏)


    // ③：黑色遮罩盒子跟着鼠标来移动
    // 鼠标经过中图片,显示 黑色遮罩
    const 黑色遮罩 = 中图片盒子.querySelector('.黑色遮罩盒子')
    中图片盒子.addEventListener('mouseover', function () {
        黑色遮罩.style.display = 'block' // 效果CSS属性, 显示:块级
    })
    // 鼠标离开中图片,隐藏 黑色遮罩
    中图片盒子.addEventListener('mouseout', function () {
        黑色遮罩.style.display = 'none' // 效果CSS属性, 显示:隐藏
    })

    // 鼠标在中图片里移动, 黑色遮罩 也随着移动
    /*
    我们要的是 鼠标在 中等盒子内的坐标， 没有办法直接得到
    得到1： 鼠标在页面中的坐标
    得到2： 中等盒子在页面中的坐标
    */
    // 监控 鼠标移动事件, 注意这里一定要用 mousemove 移动事件 (移动事件和经过事件,不一样)
    中图片盒子.addEventListener('mousemove', function (事件对象) {
        // console.log(事件对象.pageX) // 事件对象.pageX, 获取鼠标在页面的X轴坐标
        // console.log(中图片盒子.getBoundingClientRect().left) // 获取 中图片盒子,距离页面X和Y轴的距离坐标. left是距离左边页面,多少像素距离

        let 鼠标_在页面中的坐标X = 事件对象.pageX
        let 中图片盒子_在页面中的坐标X = 中图片盒子.getBoundingClientRect().left
        let 鼠标_在页面中的坐标Y = 事件对象.pageY
        let 中图片盒子_在页面中的坐标Y = 中图片盒子.getBoundingClientRect().top

        // 计算鼠标坐标
        let 鼠标_在中等盒子内的坐标X = 鼠标_在页面中的坐标X - 中图片盒子_在页面中的坐标X
        let 鼠标_在中等盒子内的坐标Y = 鼠标_在页面中的坐标Y - 中图片盒子_在页面中的坐标Y
        // 另外:坐标Y 还要在减去 页面卷去头部多少像素, 因为getBoundingClientRect()计算的是相当于 视口 的距离,不是与页面头部的距离
        let 页面滚动像素 = document.documentElement.scrollTop
        鼠标_在中等盒子内的坐标Y = 鼠标_在中等盒子内的坐标Y - 页面滚动像素

        console.log(鼠标_在中等盒子内的坐标X) // 看看鼠标在,中等图片盒子的 坐标
        console.log(鼠标_在中等盒子内的坐标Y)


        // 黑色遮罩,要限制在一个范围里,只能在 中等图片里移动,并且不能超出中等图片.  中等图片是一个400x400的盒子
        // 判断用来限制 黑色遮罩,只能出现在中等图片里
        if ((鼠标_在中等盒子内的坐标X >= 0 && 鼠标_在中等盒子内的坐标X <= 400) && (鼠标_在中等盒子内的坐标Y >= 0 && 鼠标_在中等盒子内的坐标Y <= 400)) {
            // 修改标签CSS属性, 实现 黑色遮罩 随鼠标移动
            // 黑色遮罩.style.left = 鼠标_在中等盒子内的坐标X + 'px' // 修改CSS属性, 这里修改的是CSS属性,要加单位 px
            // 黑色遮罩.style.top = 鼠标_在中等盒子内的坐标Y + 'px' // 通过不断的把鼠标的坐标,赋值给定位偏移量,实现鼠标移动 黑色遮罩盒子 也移动

            // 下面判断,控制 黑色遮罩,不能超出中等图片.  另外if如果只有一行,可以写一行,不用加大括号
            // 声明2个变量,作为黑色遮罩移动的变量
            let 移动X = 0, 移动Y = 0

            // 判断赋值条件, 鼠标移动多少, 黑色遮罩盒子的移动量
            if (鼠标_在中等盒子内的坐标X < 100) 移动X = 0
            if (鼠标_在中等盒子内的坐标X >= 100 && 鼠标_在中等盒子内的坐标X <= 300) 移动X = 鼠标_在中等盒子内的坐标X - 100
            if (鼠标_在中等盒子内的坐标X > 300) 移动X = 300 - 100
            黑色遮罩.style.left = 移动X + 'px' // 修改CSS属性, 这里修改的是CSS属性,要加单位 px

            if (鼠标_在中等盒子内的坐标Y < 100) 移动Y = 0
            if (鼠标_在中等盒子内的坐标Y >= 100 && 鼠标_在中等盒子内的坐标Y <= 300) 移动Y = 鼠标_在中等盒子内的坐标Y - 100
            if (鼠标_在中等盒子内的坐标Y > 300) 移动Y = 300 - 100
            黑色遮罩.style.top = 移动Y + 'px' // 修改CSS属性, 这里修改的是CSS属性,要加单位 px


            // 最后 局部大图片,随 黑色遮罩 移动,而移动效果
            // 说明:局部大图片 是800X800的一个背景图, 它与中图片盒子是2倍的关系. 这里设计思路是 大图片是随中图片的坐标移动的 倍速是2倍
            大图片盒子.style.backgroundPositionX = -2 * 移动X + 'px'
            大图片盒子.style.backgroundPositionY = -2 * 移动Y + 'px'
            // 修改的是CSS类里的属性, 2个因为2倍的关系,看CSS文件里,  .大图片 类的信息
            // 负号是要反方向
            // backgroundPositionX 是背景图位置坐标
        }

    })


</script>

</body>

</html>